<template>
              <div class="myButtonContainer" :class="{ outline: this.disable }" v-show="this.show !== 'gone'">
                <img :src="getButtonImg" class="img" @click="clickButton" v-show="this.show !== 'invisible'" />
                <div class="titleContainer" v-show="this.show !== 'invisible'">
                  <div class="arrow" v-show="this.showArrow"></div>
                  <div :class="this.isOn ? 'titleSelect' : 'title'" @click="clickButton">
                    {{ this.title }}
                  </div>
                  <img class="arrow" :src="getArrowImg" v-show="this.showArrow" />
                </div>
              </div>
</template>
<script>
export default {
  props: {
    showPro: {
      type: String,
      default: "visible",
    },
    titlePro: {
      type: String,
      default: "",
    },
    isOnPro: {
      type: Boolean,
      default: false,
    },
    btnImgPro: {
      type: String,
      default: null,
    },
    showArrowPro: {
      type: Boolean,
      default: false,
    },
    arrowUpPro: {
      type: Boolean,
      default: false,
    },
    disablePro: {
      type: Boolean,
      default: false,
    },
    darkModePro: {
      type: String,
      default: "light",
    },
  },
  data() {
    return {
      darkMode: "light", //是否暗黑模式
      title: "", //按钮文本
      isOn: false, //按钮是否处于选中状态
      btnImg: null, //按钮图标
      show: "visible", //是否显示按钮: visible-完全显示按钮，invisible-按钮图标和文本不可见，但按钮仍占据屏幕位置，gone-按钮图标和文本不可见,按钮也不占用屏幕位置
      showArrow: false, //是否显示文本右侧箭头，用于弹出选择对话框，显示更多可选择的按钮
      arrowUp: false, //箭头方向是否朝上，代表设置对话框已经打开
      disable: false, //按钮是否处于不可用状态
    };
  },
  created() { },
  mounted() {
    this.darkMode = this.darkModePro;
    this.title = this.titlePro;
    this.show = this.showPro;
    this.isOn = this.isOnPro;
    this.btnImg = this.btnImgPro;
    this.showArrow = this.showArrowPro;
    this.arrowUp = this.arrowUpPro;
    this.disable = this.disablePro;
  },
  watch: {
    titlePro(newVal) {
      this.title = newVal;
    },
    darkModePro(newVal) {
      this.darkMode = newVal;
    },
    isOnPro(newVal) {
      this.isOn = newVal;
    },
    btnImgPro(newVal) {
      this.btnImg = newVal;
    },
    showPro(newVal) {
      this.show = newVal;
    },
    showArrowPro(newVal) {
      this.showArrow = newVal;
    },
    arrowUpPro(newVal) {
      this.arrowUp = newVal;
    },
    disablePro(newVal) {
      this.disable = newVal;
    },
  },
  computed: {
    getButtonImg() {
      return this.btnImg;
    },
    getArrowImg() {
      if (this.darkMode === "light") {
        if (this.arrowUp) {
          return this.isOn
            ? require("../../assets/img/light/ic_spinner_small_up_on.png")
            : require("../../assets/img/light/ic_spinner_small_up_off.png");
        } else {
          return this.isOn
            ? require("../../assets/img/light/ic_spinner_small_down_on.png")
            : require("../../assets/img/light/ic_spinner_small_down_off.png");
        }
      } else {
        if (this.arrowUp) {
          return this.isOn
            ? require("../../assets/img/dark/ic_spinner_small_up_on_dark.png")
            : require("../../assets/img/dark/ic_spinner_small_up_off_dark.png");
        } else {
          return this.isOn
            ? require("../../assets/img/dark/ic_spinner_small_down_on_dark.png")
            : require("../../assets/img/dark/ic_spinner_small_down_off_dark.png");
        }
      }
    },
  },
  methods: {
    clickButton() {
      if (this.disable) {
        this.$emit("clickDisable");
      } else {
        this.$emit("click");
      }
    },
  },
};
</script>
<style scoped>
.myButtonContainer {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.myButtonContainer .img {
  width: 40px;
  height: 40px;
}

.myButtonContainer .img:active {
  opacity: 0.3;
}

.myButtonContainer .titleContainer {
  height: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  /* background: #ff0000; */
}

.myButtonContainer .titleContainer .arrow {
  width: 12px;
  height: 24px;
}

.myButtonContainer .titleContainer .title:active {
  opacity: 0.3;
}

.myButtonContainer .titleContainer .title {
  font-size: 12px;
  line-height: 24px;
  height: 24px;
  text-align: center;
  color: var(--current-second-title-color);
}

.myButtonContainer .titleContainer .titleSelect {
  font-size: 12px;
  line-height: 24px;
  height: 24px;
  text-align: center;
  color: var(--current-second-title-select-color);
}
</style>
